<template>
  <div class="articleList">
    <div v-for="article in articleList">
      <article-item :title="article.title" :brief="article.articleBrief" :id="article.id"></article-item>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import articleItem from './articleItem.vue'
  export default {
    components: {
      articleItem
    },
    data () {
      return {
        articleList: {},
        apiUrl: 'http://localhost:8080/article/getArticleList.do?account=root'
      }
    },
    created () {
      this.$http.get(this.apiUrl).then(response => {
        this.articleList = response.body
      }).catch(function (response) {
        console.log(response)
      })
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped="">
  .articleList
    margin-right 100px
    margin-left 280px
    margin-top 50px
</style>
